{% load static from staticfiles %}
<!DOCTYPE html>
<html lang='zh-CN'>
	<head>
	    <!--设置字符集-->
	    <meta charset='utf-8'>
	    <!--让IE开启它的兼容模式-->
	    <meta http-equiv='X-UA-Compatible' content='IE-edge'>
	    <!--让手机的屏幕端口正常显示-->
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <!--上面3个标签必须放在最前面，任何其他内容都必须跟随其后-->
	  
	    <title>Bootstrap 101 Template</title>
	    <!-- Bootstrap -->
	    <link rel="stylesheet" href="{% static 'myweb/css/bootstrap.min.css' %}">
	    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	    <script src="{% static 'myweb/js/jquery-1.10.2.min.js' %}"></script>
	    <!-- Include all compiled plugins (below), or include individual files as needed -->
	    <script src="{% static 'myweb/js/bootstrap.min.js' %}"></script>
	    <style type='text/css'>
			body { padding-top: 70px; }
	
			#one{
				margin-top:9px;
				margin-left:250px;
			}
			#two{
				margin-left:9px;
				margin-top:9px;
			}
						
			a:hover{
				text-decoration:none;
				color:#000000;
			}
			#menu{
				
				word-spacing:15px;
								
			}

			#p1,#p2,#p3,#p4,#p5,#p6,#p7,#p8,#p9,#p10,#p11,#p12,#p13,#p14,#p15,#p16,#p17,#p18,#p19,#p20{
				display:block;
				color:#D7000F;
				font-size:4;
			}
			#b1,#b2,#b3,#b4,#b5,#b6,#b7,#b8,#b9,#b10,#b11,#b12,#b13,#b14,#b15,#b16,#b17,#b18,#b19,#b20{
				display:none;
			}

			#g1,#g2,#g3,#g4,#g5,#g6,#g7,#g8,#g9,#g10,#g11,#g12,#g13,#g14,#g15,#g16,#g17,#g18,#g19,#g20{
				
				height:350px;
			}
			
			
			
			
		</style>	   
 	</head>
 	<body>
 		<!--导航条start-->
		<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		  <!-- Brand and toggle get grouped for better mobile display -->
		  <div class="navbar-header">
		    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		      <span class="sr-only">Toggle navigation</span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		    </button>
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		    	<div class="container">
		    		<div class="row">
		    			<div class='col-md-offset-1'>

				    			<ul class="nav navbar-nav">
				    				<li><img src="{% static 'myweb/img/2.png' %}" height='50px'/></li>
						      		<li><a href="#">在线商城</a></li>
						      		<li><a href="">坚果 3</a></li>
						      		<li><a href="">坚果 Pro 2</a></li>
						      		<li><a href="">Smartisan OS</a></li>
						     		<li><a href="">欢喜云</a></li>
						      		<li><a href="">应用下载</a></li>
						      		<li><a href="">官方论坛</a></li>
									{% if request.session.vipuser %}

										<li   style="line-height: 62px;  margin-left: 150px;">
											<a href="{% url 'vipusers' %}"><img src="{% static 'myweb/img/profile1.jpeg'%}" height="30px" id='profile'> {{ request.session.vipuser.name }}</a>
										</li>
										<li><button type="button" class="btn btn-default btn-sm"  id="two">
											<span class="glyphicon glyphicon-shopping-cart" ></span>
										</button></li>
									{% else %}
										<li><button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" id="one">
											<span class="glyphicon glyphicon-user" >登录</span>
										</button></li>

									{% endif %}

					    			

					    		</ul>
					    		</div>
					</div>
				</div>
   
		  	</div><!-- /.navbar-collapse -->
		 </div>
		</nav>
		<!--导航条end-->

		
		<!--容器start-->
		<div class='container'>
			<!--菜单栏start-->
				<div class='row'>
					<div class='col-md-12' id="menu">						
						<font size='3'>首页</font>
						<font size='3'>手机</font>
						<font size='3'>官方配件</font>
						<font size='3'>“坚果”服装</font>
						<font size='3'>空气净化器</font>
						<font size='3'>品牌周边</font>
						<font size='3'>第三方产品</font>
						<font size='3'>全部</font>
						<font size='3'>服务</font>
						<font size='3'>企业团购</font>						
					</div>
				</div><!--row end-->
				<hr/>
				<div class='row'>
					<div class='col-md-12' id="menu">						
						<font size='2'>综合排序</font>
						<font size='2'>销量排序</font>
						<font size='2'>价格从低到高</font>
						<font size='2'>价格从高到低</font>						
					</div>
				</div><!--row end-->
				<hr/>

				<div class='row'>					
					{% for vo in context %}
					<div class="col-xs-6 col-md-3">
					  	    <div class="thumbnail" id='g1'>
								<a href="{% url 'detail' vo.id %}">
									<img src="{% static 'mybackend/img/goods' %}/m_{{ vo.picname }}" alt="...">
									<div class="caption">
									<center><h5>{{ vo.title }}</h5></center>
									<center><p>{{ vo.description|truncatechars:10 }}</p></center>
									<div id='p1'><center><strong>￥ {{ vo.price }}</strong></center></div>
									<div id='b1'><center><p><a href="#" class="btn btn-primary" role="button">查看详情</a> <a href="#" class="btn btn-default" role="button">加入购物车</a></p></center></div>
									</div>
								</a>
					  	    </div>
					</div>
					{% endfor %}

				</div><!--row end-->

		</div><!--container end-->


		
		<hr/>
		<!--底部start-->
		<footer class="footer ">
	    	<div class="container">
		    	<div class='row'>      
		            <div class="col-md-9">		            	
		            	
		            	<div class='col-xs-4 col-md-2'>
		              		<h4>订单服务</h4>
		              			<ul class="list-unstyled">
		                			<li><a href="">购买指南</a></li>
		                			<li><a href="">支付方式</a></li>
		                			<li><a href="/links/">运货政策</a></li>
		              			</ul>
	            		</div>

			            <div class="col-xs-4 col-md-2">
			            	<h4>服务支持</h4>
			              	<ul class="list-unstyled">
			                	<li><a href="">售后服务</a></li>
			                	<li><a href="">维修门店</a></li>
			                	<li><a href="">零售门店</a></li>
			              	</ul>
			            </div>


			            <div class="col-xs-4 col-md-2">
			            	<h4>自助服务</h4>
			              	<ul class="list-unstyled">
			                	<li><a href="">热点资讯</a></li>
			                	<li><a href="">预约购买</a></li>
			                	<li><a href="">订单物流</a></li>
			              	</ul>
			            </div>


			            <div class="col-xs-4 col-md-2">
			            	<h4>媒体中心</h4>
			            	<ul class="list-unstyled">
				                <li><a href="">新闻动态</a></li>
				                <li><a href="">官方视频</a></li>
				                <li><a href="">图片资源</a></li>
			              	</ul>
			            </div>


			            <div class="col-xs-4 col-md-2">
			            	<h4>关于公司</h4>
			            	<ul class="list-unstyled">
				                <li><a href="">公司简介</a></li>
				                <li><a href="">加入我们</a></li>
				                <li><a href="">联系我们</a></li>
			              	</ul>
			            </div>


						<div class="col-xs-4 col-md-2">
			            	<h4>关注我们</h4>
			              	<ul class="list-unstyled">
				                <li><a href="">新浪微博</a></li>
				                <li><a href="">官方微信</a></li>
				                <li><a href="">官方贴吧</a></li>
			              	</ul>
			            </div>	  
	        	</div>

				<div class='col-xs-12 col-md-3'>
					
						<p align="right"><strong><font size=5>4000-626-5666</font></strong></p>
						<p align="right">周一至周日 9:00-18:00（仅收市话费）</p>
						<p align="right"><button><a href=''>在线帮助</a></button></p>
					
				</div>
	      	</div>	      
	      	<hr/>

	      	<div class="row footer-bottom">
	        
	        	<div><center>Copyright,Smartisan Digital Co, Ltd All Rights Reserved.北京锤子数码科技有限公司 |法律声明|隐私条款|开发者中心</center></div>
	        	<div><center><a href=''>京ICP备11008151号&nbsp;&nbsp;&nbsp;&nbsp;京公网安备11010802014853</a></center></div>
	       
	      	</div>
	    
	  	</footer>
		<!--底部end-->
		<div class="container-fluid">
			<div class="row">
				<div></div>
			</div>
		</div>

		<script type='text/javascript' src='jquery-1.8.3.min.js'></script>

 	</body>
</html>